<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:replace="common/common :: common-head">
    <div th:replace="common/common :: #common-js"></div>
</head>
<body>

<div th:replace="common/common :: #common-nav-left"></div>
<div th:replace="common/common :: #common-header"></div>


<!--页面主要内容-->
<main class="lyear-layout-content" id="index">

    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-6 col-lg-4">
                <div class="card bg-danger">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">文章总数</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{{data.total}}</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4">
                <div class="card bg-success">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">下载总量</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">34,005,000</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4">
                <div class="card bg-purple">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">新增留言</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">153 条</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h4>每周文章</h4>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-bars"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h4>交易历史记录</h4>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-lines"></canvas>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">
                        <form class="pull-right search-bar" method="get" action="#!" role="form">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <input type="hidden" name="search_field" id="search-field" value="title">
                                    <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                        标题 <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">标题</a> </li>
                                        <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">栏目</a> </li>
                                    </ul>
                                </div>
                                <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
                            </div>
                        </form>
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
                            <a class="btn btn-success m-r-5" href="#!"><i class="mdi mdi-check"></i> 启用</a>
                            <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
                            <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                        </div>
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input type="checkbox" id="check-all"><span></span>
                                        </label>
                                    </th>
                                    <th class="hide">编号</th>
                                    <th>标题</th>
                                    <th>标签</th>
                                    <th>作者</th>
                                    <th>创建时间</th>
                                    <th>阅读量</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in data.data">
                                    <td>
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input type="checkbox" name="ids[]" :value="item.id"><span></span>
                                        </label>
                                    </td>
                                    <td class="hide">{{item.id}}</td>
                                    <td>{{item.title}}</td>
                                    <td>{{item.memo}}</td>
                                    <td>{{item.name}}</td>
                                    <td>{{item.createDate}}</td>
                                    <td>{{item.pageViews}}</td>
                                    <td>
                                        <font class="text-success" v-if="item.status == 'true'">公开</font>
                                        <font class="text-danger" v-else>私密</font>
                                    </td>
                                    <!-- 操作 -->
                                    <td>
                                        <button class="btn btn-xs btn-info"><i class="far fa-edit"></i>修改</button>
                                        <button class="btn btn-xs btn-danger" @click="deleted(item.id,item.title)"><i class="far fa-trash-alt"></i>删除</button>
                                        <button class="btn btn-xs btn-default" @click="see(item.id)"><i class="far fa-eye"></i>查看</button>
                                    </td>
                                </tr>

                                </tbody>
                            </table>

                        </div>
                        <div th:include="common/page :: page"></div>
                    </div>
                </div>
            </div>

        </div>

        </div>

    </div>

</main>
<!--End 页面主要内容-->
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
<script th:src="@{/js/forum/blog/list.js}"></script>

</body>
</html>